import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import { Table, Radio, message } from 'antd';
import style from '../../DataBoard.css';
import LocalStyle from './CustomDatePicker.css';
import IndexStyle from '@/pages/IndexPage.css';
// import Loading from '@/pages/components/Loading';
let data = [];
for ( let i = 0; i<30; i++){
    data.push({ time:`2023-10-01 17:${i<10 ? '0' + i : i}`, mach:'制冷主机'+ ( i + 1 ) + '#', desc:'目标30A，实际100A', status:'未处理', type:'电流越限' });
}

let timer = null;
let num = 6;

function ScrollTable({ theme, onDispatch }){
    const [showList, setShowList] = useState({ index:0, list:data });
    const [warningType, setWarningType] = useState('1');
    const [loading, setLoading] = useState(false);
    useEffect(()=>{
        return ()=>{
            clearInterval(timer);
            timer = null;
        }
    },[]);
    useEffect(()=>{
        clearInterval(timer);
        // setLoading(true);
        // new Promise((resolve, reject)=>{
        //     onDispatch({ type:'board/fetchAlarmList', payload:{ resolve, reject, warningType }})
        // })
        // .then((data)=>{
            if ( data.length > 6 ) {
                setShowList({ index:0, list:data.slice(0, 6)});
                timer = setInterval(()=>{
                    setShowList((prev)=>{
                        let nextIndex = ++prev.index;
                        let arr = data.slice(num * nextIndex, num * nextIndex + num);
                        if ( arr.length ) {
                            return { index:nextIndex, list:arr };
                        } else {
                            return { index:0, list:data.slice(0, 6) };
                        }
                    });
                }, 5000)
            } else {
                setShowList({ index:0, list:[]});
            }
            setLoading(false);
        // })
        // .catch(msg=>message.error(msg))
    },[warningType])
    let columns = [
        { 
            title:'序号',
            render:(text,record, j)=>{
                // return `${ ( currentPage - 1) * pagesize + index + 1}`;
                return `${ showList.index * num + j + 1}`;
            } 
        },
        { title:'告警设备', dataIndex:'mach' },
        { title:'告警类型', dataIndex:'type', render:value=>(<span className={IndexStyle['tag-off']} style={{ fontSize:'0.8rem' }}>{ value }</span>) },
        { 
            title:'告警信息',
            dataIndex:'desc',
            render:value=>(<span style={{ color:'red' }}>{ value }</span>)
        },
        // { 
        //     title:'当前状态', 
        //     dataIndex:'status', 
        //     render:value=>{
        //         let info = value === 1 ? { text:'未处理', color:'#f53d3d'} : value === 2 ? { text:'跟进中', color:'#155cff'} : value === 3 ? { text:'已处理', color:'#00b42a'} : { text:'挂起', color:'#ff7d00'};
        //         return <span style={{ color:info.color }}>{ info.text }</span>
        //     }
        // },
        { title:'发生时间', dataIndex:'time' }
    ];
    return (
        <div className={style['card-container']} style={{ boxShadow: 'none' }}>
            <div
                className={style['card-container-title']}
                style={{ height: '2rem', borderBottom:'none', lineHeight:'2rem' }}
            >
                <div style={{ width:'100%', display:'flex', justifyContent:'space-between' }}>
                    <div style={{ marginRight: '1rem', color: theme === 'dark' ? '#fff' : '#000' }}>实时告警</div>
                    <div><a style={{ fontSize:'0.8rem' }} onClick={()=>history.push('/ac/alarm_manage/alarm_list')}>查看更多</a></div>
                </div>
            </div>

            <div style={{ height:'calc( 100% - 2rem)' }}>
                <Table 
                    className={LocalStyle['custom-table'] + ' ' + ( theme === 'dark' ? LocalStyle['dark'] : '')}
                    columns={columns}
                    rowKey='record_id'
                    dataSource={showList.list}
                    locale={{
                        emptyText:(<div style={{ margin:'2rem 0'}}>当前暂无告警</div>)
                    }}
                    pagination={false}
                />
            </div>
        </div>
    )
}

export default ScrollTable;